雖然常常設定文字的樣式像是 font-family，但是對於字體的一些細節沒有非常認識，這篇紀錄常見的字體專有名詞

襯線字體 ( Serif )

襯線字體的特色是在每個字的筆畫末端都有額外的細節，這些細節稱為襯線，也較有粗細變化襯線字體看起來較傳統
在 google fonts 可以選擇 Serif 分類，有各種不同的襯線字體
襯線字體適合用於較長的文字篇幅
這裡也有 justfont 推薦的襯線字體：Google fonts 的字體（serif 篇） , justfont blog

無襯線字體 ( San-serif )

無襯線字體筆畫末端是直的，設計較簡潔，粗細對比不明顯，若文字字體較小的話可選擇無襯線字體較清楚易讀
像是 Roboto 就是常見的無襯線字體
Google fonts 的無襯線字體：Google Fonts
justfont 介紹：Google fonts 的字體（sans-serif 篇） , justfont blog

等寬字體 ( Monospace )

等寬字體中，每個字母寬度都相同，因等寬好對齊，因此常用於原始碼中
免費資源網路社群中也有介紹幾種適用於程式碼的等寬字體：Monospaced Font – 免費資源網路社群

另外還有手寫體或草體 ( Cursive) 和幻想體 ( Fantasy )，手寫體顧名思義就是手寫風格的字體，幻想體算是裝飾性文字，適用於標題，較不適合用於內容長文
Google Fonts84 Fantasy Fonts - 1001 Free Fonts
▼ 除了 Fantasy 的四種通用字體示意圖

以上五種為 CSS 的通用字體 ( generic-family )：15.3.1通用字體系列

在設定 font-family 時可分為兩部分：指定字體和通用字體，通常會將指定字體放在前面，通用（泛用）字體放在最後，會先套用前面的字體，若不支援該字體才會套用後面的字體，也可以依照使用的語言，套用英文、中文等字體
需注意若字體名稱為中文，或是不只一個詞，像是 Segoe UI，需要加上引號，確保瀏覽器順利讀取

font-family: "Segoe UI","微軟正黑體",sans-serif;

另外也需注意字體在系統間的支援度，像是 San Francisco Pro 和 PingFang TC 是蘋果相關系統（Mac OS / IOS … ) 字體，Windows 系統也有系統內的字體，因此在指定 font-family 時也需注意系統間的差異，盡量可指定不同系統都可使用的字體

在查詢時也注意到字體和字型常常搞混，自己到現在還是會搞混 XD
but 雜談 ─ 常常搞混的一些詞 , justfont blog

參考資料：
HTML & CSS 網站設計建置優化之道
font-family要怎麼玩 | 卡斯伯 Blog - 前端，沒有極限
Google fonts
https://www.w3.org/TR/CSS22/fonts.html#generic-font-families
認識字體 - justfont
CSS font-family 詳細介紹 - OXXO.STUDIO